<?php
/**
 * 地图
 * User: adophper <hello@adophper.com>
 * Date: 2018/3/20
 * Time: 16:17
 */

?>
<style type="text/css">
    #l-map{height:300px;width:100%;}
</style>
<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="请输入地址来直接查找相关位置" id="suggestId">
        <div class="input-group-btn"><button class="btn btn-default" id="searchMap"><i class="fa fa-search"></i> 搜索</button></div>
    </div>
</div>
<div id="l-map"></div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");
    // 初始化地图,设置城市和地图级别。
    <?php
    if (!empty($lng) && !empty($lat)) {
    ?>
    var point = {
        lng: <?=$lng?>,
        lat: <?=$lat?>
    }
    if ($("#city").length > 0 && $("#city").val() != '') {
        var city = $("#city").find("option:selected").text();
        map.centerAndZoom(city,12);
    }else{
        map.centerAndZoom("北京",12);
    }
    setMap(point)
    getAddress({lng: point.lng, lat: point.lat});
    <?php
    }else{
    ?>
    var point = {
        lng: '',
        lat: ''
    }
    if ($("#city").length > 0 && $("#city").val() != '') {
        var city = $("#city").find("option:selected").text();
        map.centerAndZoom(city,12);
    }else{
        map.centerAndZoom("北京",12);
    }
    <?php
    }
    ?>

    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.NavigationControl());
    var myValue;
    $("#searchMap").on('click', function(){
        var _value = $("#suggestId").val();
        _value = _value.replace(/\s+/g, '');
        if (_value == '') return ;
        myValue = _value;
        setPlace();
    })

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var poi = local.getResults().getPoi(0);    //获取第一个智能搜索的结果
            point = poi.point;
            setMap(poi.point)
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    function setMap(point){
        map.centerAndZoom(new BMap.Point(point.lng, point.lat), 12);
        //var infoWindow = new BMap.InfoWindow("请您移动此标记，选择您的坐标！")
        //var myIcon = new BMap.Icon("https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png", new BMap.Size(300,157));
        var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));  // 创建标注，为要查询的地方对应的经纬度
        map.panBy(new BMap.Point(point.lng, point.lat));
        map.removeOverlay(marker.getLabel());
        var label = new BMap.Label("请您移动此标记，选择您的坐标！",{position: point, offset: new BMap.Size(20,-10)});
        label.setStyle({
            maxWidth: 'none',
            borderColor: '#00f'
        });
        marker.setLabel(label);
        map.addOverlay(marker);
        marker.enableDragging(); //标注可拖拽
        // 开启事件监听
        marker.addEventListener("dragend", function (e) {
            //var x = e.point.lng; //经度
            //var y = e.point.lat; //纬度
            getAddress({lng: e.point.lng, lat: e.point.lat});
        });
    }

    function getAddress(location){
        var gc = new BMap.Geocoder();
        point = location
        gc.getLocation(new BMap.Point(location.lng, location.lat), function(rs){
            if (rs != 'null' && rs != null) {
                //获取地址
                $("#suggestId").val(rs.address);
            }
            //画图 ---》显示地址信息
            //var label = new BMap.Label(address,{offset:new BMap.Size(20,-10)});
            //map.removeOverlay(marker.getLabel());//删除之前的label
            //marker.setLabel(label);
        });
    }
</script>
